<template>
  <div>
    <div class="Groupins">
      <div class="groupx">用户头像</div>
      <div class="groupxx">用户名称</div>
    </div>
    <div class="GGB">
      <div class="GGBx" v-for="item in joinlist" :key="item.id">
        <div class="groupx">
          <el-image class="imagein" :src="$imageUrl + item.imageId"></el-image>
        </div>
        <div class="groupxx">{{ item.userName }}</div>
        <el-button
          @click="deleteUserById(item.userId, item.id, item.groupNameC)"
          type="danger"
          round
          style=""
          >踢出</el-button
        >
        <el-button
          type="text"
          v-if="item.isTop == 0"
          @click="jinyan(item.userId)"
          >禁言</el-button
        >
        <el-button v-else type="text" @click="jiechu(item.userId)"
          >解除</el-button
        >
        <el-dialog
          title="禁言时常"
          :visible.sync="dialogVisible"
          width="30%"
          append-to-body
        >
          <el-form ref="ruleForm" label-width="100px">
            <span>禁言时常：</span>
            <el-select
              v-model="time"
              filterable
              placeholder="请选择"
              style="width: 120px"
            >
              <el-option
                v-for="items in options"
                :key="items.value"
                :label="items.label"
                :value="items.value"
              >
              </el-option>
            </el-select>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="quxiai">取 消</el-button>
            <el-button type="primary" @click="joiniForm('ruleForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <div class="groupxp" v-if="item.joinTime">
          {{ item.joinTime }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
import dateUtil from "../util/date";
export default {
  props: {
    //从父组件里接受过来的群聊信息
    joinlist: Array,
    groupId: Number,
    groupName: String,
  },
  watch: {
    joinlist(newValue, oldValue) {
    },
  },
  data() {
    return {
      dialogVisible: false,
      //被操作人id
      id: "",
      //禁言时长
      time: "",
      groupNameC: "",
      joinForm: [],
      id: 0,
      toUserId: "",
      type: "app", //系统信息
      content: "您已被踢出群聊",
      inceptIds: [],
      inceptId: 1,
      checkType: 2,
      msg: [],
      options: [
        {
          value: 60 * 1,
          label: "1分钟",
        },
        {
          value: 60 * 5,
          label: "5分钟",
        },
        {
          value: 60 * 10,
          label: "10分钟",
        },
        {
          value: 60 * 30,
          label: "30分钟",
        },
        {
          value: 60 * 60,
          label: "一小时",
        },
      ],
      value: "",
      aa: [],
    };
  },
  methods: {
    quxiai() {},
    jinyan(userId) {
      //打开弹窗
      this.id = userId;
      //禁言时间
      this.time = null;
      //打开弹窗
      this.dialogVisible = true;
    },

    //踢出群聊
    deleteUserById(userId) {
      this.$prompt("请输入踢出原因", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          this.$axios
            .delete("/joinGroup/groupDel", {
              params: {
                //群聊id
                fromId: this.groupId,
                //被操作人id
                toId: userId,
                //群聊名称
                groupName: this.groupName,
                //退出原因
                value: value,
              },
            })
            .then((result) => {
              if (result.data.flag) {
                this.$emit("updateList");
                this.$message({
                  type: "info",
                  message: "成功踢出",
                });
              } else {
                this.myMessage("warning", result.data.obj);
              }
            });
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //解除禁言
    jiechu(id) {
      this.id = id;
      let data = {
        fromId: this.groupId,
        toId: this.id,
      };
      this.$axios
        .post("/joinGroup/relievetime", data)
        .then((result) => {
          if (result.data.flag) {
            this.$message({
              type: "info",
              message: "解除成功",
            });
            this.$emit("updateList");
          } else {
            this.myMessage("warning", result.data.obj);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //添加禁言时间
    joiniForm() {
      let data = {
        fromId: this.groupId,
        toId: this.id,
        mushinTimeLong: this.time,
      };
      this.$axios
        .post("/joinGroup/joinins", data)
        .then((res) => {
          if (res) {
            this.dialogVisible = false;
            //还需要更新一下 成员列表
            this.$emit("updateList");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
.Groupins {
  width: 700px;
  margin: 0 auto;
  height: 50px;
  line-height: 50px;
  font-weight: bolder;
  background: gainsboro;
}
.groupxx {
  width: 120px;
  height: 20px;
  font-size: 13px;
  color: rgb(149, 148, 148);
  float: left;
}
.imagein {
  width: 50px;
  height: 50px;
  display: inline-block;
  border-radius: 50%;
  /* margin-right: 250px;
        margin-top: -25px; */
  float: left;
}
.groupx {
  width: 120px;
  height: 20px;
  font-size: 13px;
  color: rgb(149, 148, 148);

  margin-left: 15px;
  float: left;
}
.groupxp {
  width: 130px;
  height: 20px;
  font-size: 13px;
  color: rgb(149, 148, 148);
  float: right;
  margin-right: 30px;
}

.GGB {
  width: 700px;
  margin: 0 auto;
}
.GGBx {
  width: 700px;
  height: 60px;
  line-height: 50px;
  border-bottom: 1px solid gainsboro;
  padding: 5px 0px;
  box-sizing: border-box;
}
</style>